<!-- 案件管理-合规人员 -->
<template>
  <div class="page">
    <!-- <div class="head">
      <Title></Title>
    </div> -->
    <van-tabs class="tabs" v-model="active" background="#3975C6" color="#fff" title-active-color="#fff"
      title-inactive-color="#dedede" @change="handleChangeTab">
      <van-tab title="合规案例" name="all">
        <CaseCompliant v-if="active == 'all'" :list="typeList"></CaseCompliant>
      </van-tab>
      <van-tab title="案例维度统计" name="unasq">
        <CaseStatistics v-if="active == 'unasq'" :orgid="orgid"></CaseStatistics>
      </van-tab>
      <van-tab title="员工维度统计" name="asqed">
        <EmployeeStatistics v-if="active == 'asqed'" :orgid="orgid"></EmployeeStatistics>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Title from '@/components/commonTitle.vue'
import CaseCompliant from './caseCompliantList.vue'
import CaseStatistics from './caseStatisticsList.vue'
import EmployeeStatistics from './employeeStatisticsList.vue'
import { getCaseData } from '@/api/case'
import { jsonToTree } from '@/utils/util.js'
export default {
  name: 'caseCompliant',
  components: { Title, CaseCompliant, CaseStatistics, EmployeeStatistics },
  data() {
    return {
      active: this.$route.query.active ? this.$route.query.active : 'all',
      tabs: [
        { title: '合规案例', name: 'all' },
        { title: '案例维度统计', name: 'unasq' },
        { title: '员工维度统计', name: 'asqed' },
      ],
      typeList: [],
      organizationalList: [],//分支机构代码
      orgid: '', //根结构
    }
  },
  mounted() {
    this.getQryFxfsList()
    this.getComponyCodeList()
  },
  methods: {
    async getQryFxfsList() {
      const resData = await getCaseData({ code: '80304' })
      if (!resData || !resData.data || !resData.data.VALUE_LIST) return
      this.typeList = resData.data.VALUE_LIST
      this.typeList.unshift({ ID: '0', NAME: '全部' })
    },
    // 获取分/子公司机构列表，修改为树结构
    async getComponyCodeList() {
      const resData = await getCaseData({ code: '80305' })
      if (!resData || !resData.data || !resData.data.VALUE_LIST) return
      // this.organizationalList = resData.data.VALUE_LIST || []
      let treeList = jsonToTree(resData.data.VALUE_LIST) || []
      // console.log(treeList, '----ttt----');

      this.$store.commit('SET_TREEDATA',treeList)
      if (!treeList || !treeList.length) return
      this.orgid = treeList[0].id
    },
    handleChangeTab(val) { },

    openDetail(rowdata) {
      this.$router.push({
        path: '/compliantCasedetail',
        query: {
          id: rowdata.id,
          type: 1 // 合规
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  height: 100%;
  overflow: hidden;
  position: relative;

  .head {
    height: 90px;
  }

  /deep/ .tabs {
    // height: calc(100% - 90px);
    height: 100%;
    overflow: auto;

    .van-tabs__wrap {
      height: 116px;
    }

    .van-tabs__content {
      height: calc(100% - 116px);
      overflow: auto;

      .van-tab__pane {
        height: 100%;
      }
    }

    .van-tabs__nav--line {
      padding-bottom: 12px;
    }
  }



}
</style>